<template>
  <div>
    <div class="mb24 pv16 ph24 bgc-white br4 flex-center">
      <SelectCompany />
    </div>
    <SummaryBarOverview @selectChange="onSelectChange" />
    <OverviewChart />
    <a-tabs v-model="activeKey" class="bgc-white ph24 pv12" @change="onTabChange">
      <a-tab-pane key="all" tab="全部合同记录">
        <ListAll ref="list_all" mode="overview" />
      </a-tab-pane>
      <a-tab-pane key="electronic" tab="电子合同记录">
        <ListElectronic ref="list_electronic" mode="overview" />
      </a-tab-pane>
      <a-tab-pane key="paper" tab="纸质合同记录">
        <ListPaper ref="list_paper" mode="overview" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import SelectCompany from "@/components/SelectCompany";
import SummaryBarOverview from "./components/summaryBar_overview.vue";
import OverviewChart from "./components/overview_chart.vue";
import ListElectronic from "./list_electronic.vue";
import ListPaper from "./list_paper.vue";
import ListAll from "./list_all.vue";
export default {
  name: "",
  components: { ListElectronic, ListPaper, ListAll, SummaryBarOverview, OverviewChart, SelectCompany },
  mixins: [],
  props: {},
  data() {
    return {
      activeKey: "all",
      electronicDidInit: false
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onTabChange(tab) {
      if (tab === "electronic" && !this.electronicDidInit) {
        this.$nextTick(() => {
          if (this.$refs.list_electronic) {
            this.$refs.list_electronic.selectFunc();
            this.electronicDidInit = true;
          }
        });
      }
    },
    onSelectChange(tab, value) {
      const dom = document.querySelector(".main-content-wrapper");
      if (tab === "all") {
        this.activeKey = "all";
        this.$nextTick(() => {
          dom.scrollTop = 746;
          if (this.$refs.list_all) {
            this.$refs.list_all.selectFunc(value);
          }
        });
      } else if (tab === "electronic") {
        this.activeKey = "electronic";
        this.$nextTick(() => {
          dom.scrollTop = 746;
          if (this.$refs.list_electronic) {
            this.$refs.list_electronic.selectFunc(value);
            this.electronicDidInit = true;
          }
        });
      } else if (tab === "paper") {
        this.activeKey = "paper";
        this.$nextTick(() => {
          dom.scrollTop = 746;
          if (this.$refs.list_paper) {
            this.$refs.list_paper.selectFunc(value);
          }
        });
      }
    }
  }
};
</script>
<style lang="scss"></style>
